<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('materials.stockInquiry')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="distributed-head">
					<view class="navigation">
						<view class="gui-form-item gui-border-b navigation_card" @click="goToSelectWarehouse">
							<view class="gui-form-body gui-text-right selectWare">
								{{ data.warehouseCode }}
							</view>
						</view>
						<view class="gui-form-item gui-border-b navigation_card" style="margin-left: 6rpx;">
							<view class="gui-form-body gui-text-right">
								<input type="text" class="gui-form-input gui-text-right " v-model="data.materialCode"
									:placeholder="$t('materials.pleaseMaterialcode')" @input="selectMaterial"
									style="text-align: left;" />
							</view>
						</view>
					</view>

					<!-- 查询消息反馈 -->
					<view class="queryMessage">
						<view class="queryMessage_list">
							<view class="queryMessage_list_frist" style="margin-right: 4rpx;">
								<view class="queryMessage_list_title">{{ $t('distributedOut.warehouse') }}</view>
								<view class="queryMessage_list_spec">{{ data.warehouseCode || 0 }}</view>
							</view>
							<view class="queryMessage_list_tow" style="margin-right: 4rpx;">
								<view class="queryMessage_list_title">{{ $t('materials.materialTotalItem') }}</view>
								<view class="queryMessage_list_spec">{{ data.materialTotalItem || 0 }}</view>
							</view>
							<view class="queryMessage_list_frist">
								<view class="queryMessage_list_title">{{ $t('materials.materialsTotal') }}</view>
								<view class="queryMessage_list_spec">{{ data.materialTotal || 0 }}</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view class="record-card" v-for="(list, index) in data.scanList" :key="index">
						<view class="card-body">
							<view class="card-mini-head">
								<view class="title-line"></view>
								<text>{{$t('translationImage.serialNumber')}}：{{index+1}}</text>
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedOut.warehouse') }}：</text>{{
										list.warehouseCode
								}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedOut.barcode') }}：</text>{{ list.barcode
								}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.materialCode') }}：</text>
								{{ list.materialCode }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{
										list.materialSpec
								}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.materialName') }}：</text>{{
										list.materialName
								}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.qty') }}：</text>{{ list.currentQty
								}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.uom') }}：</text>{{ list.unit
								}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedOut.location') }}：</text>{{ list.locationCode
								}}
							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.scanList.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import superweiCombox from '@/components/superweiCombox';
import { navigate } from '@/utils/routerSkip.js'
import comboGrid from "@/components/comboGrid";
import { inventoryQuery } from '@/api/api.js';
import tableColor from '@/hooks/tableColor.js';
import { onShow } from '@dcloudio/uni-app';
import { SELECT_WAREHOUSEID, SELECT_WAREHOUSENAME, SELECT_WAREHOUSECODE } from '@/constant/index.js'
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let data = reactive({
	materialCode: "",
	warehouseName: "",
	warehouseCode: t('smashRemoval.all'),
	columnHome: {
		column: [{
			label: t('distributedOut.warehouse'),
			name: "warehouseCode",
		}]
	},

	column: [{
		name: 'warehouse',
		type: 'ailibtn',
		label: t('distributedOut.warehouse'),
		scanValue: '',
		width: 80,
	},
	{
		name: 'materialCode',
		label: t('distributedEnter.materialCode'),
		width: 100,
		emptyString: '--'
	},
	{
		name: 'materialName',
		label: t('distributedEnter.materialName'),
	},
	{
		name: 'materialQty',
		label: t('distributedEnter.')
	}],
	wmsReceiptDs: [],
	materialTotalItem: 0,
	materialTotal: 0,
	scanList: [],
	noticeHooks: false,
	page: 1,
	rows: 20
});
// 注册组件
components: {
	superweiCombox,
		comboGrid
}
// 页面显示获取数据
onShow(() => {
	data.warehouseCode = uni.getStorageSync(SELECT_WAREHOUSECODE) || 'All';
	data.warehouseName = uni.getStorageSync(SELECT_WAREHOUSENAME) || '全部仓库';
	data.id = uni.getStorageSync(SELECT_WAREHOUSEID) || '55';
	data.scanList = []
	data.materialTotalItem = 0
	data.materialTotal = 0
	selectMaterialCode()
})

// 获取选中的仓库的id并传递后端获取数据
const handelGetClick = (x) => {
	data.warehouseId = x.id ? x.id : '';
	data.warehouseName = x.warehouseName ? x.warehouseName : '';
	data.warehouseCode = x.warehouseCode ? x.warehouseCode : '';
}

const selectMaterial=()=>{
	data.page=1
	data.rows=20
	selectMaterialCode()
}

// 物料代码查询
const selectMaterialCode = () => {
	// data.scanList=[]
	inventoryQuery({
		wareHouseCode: data.warehouseCode == "All" || data.warehouseCode == "全部" ? "" : data.warehouseCode,
		materialCode: data.materialCode,
		page: data.page,
		rows: data.rows
	}).then(res => {
		console.log(res.data.object);
		if (res.status == 200) {
			data.noticeHooks = false
			if (data.page == 1) {
				if (res.data.pageSet.rows == 0) {
					data.noticeHooks = true
				}
				data.materialTotalItem = res.data.object.materialSize;
				data.materialTotal = res.data.object.sumQty
				data.scanList = res.data.pageSet.rows
			} else {
				if (data.scanList.length == res.data.pageSet.total) {
					data.noticeHooks = true
				} else {
					data.materialTotalItem = res.data.object.materialSize;
					data.materialTotal = res.data.object.sumQty
					let arr = res.data.pageSet.rows
					data.scanList = [...data.scanList, ...arr]
				}
			}
		}
	})
}

const goToSelectWarehouse = () => {
	navigate({
		url: '/pages/invoices/finishedWarehouseSelect'
	})
};

// 下拉加载
const scrolltolowerFn = () => {
	if (!data.noticeHooks) {
		data.page++
		console.log(data.page)
		selectMaterialCode()
	}
}
</script>

<style scoped lang="scss">
.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.navigation {
	height: 80rpx;
	display: flex;
	margin-bottom: 20rpx;
}

.navigation_card {
	height: 80rpx;
	padding-top: 20prx;
	width: 50%;
	background-color: #fff;
	padding-right: 10rpx;
	box-sizing: border-box;

}

.queryMessage {
	margin: 10rpx;
	width: 100%;

	&_list {
		height: 80rpx;
		width: 100%;
		color: rgb(107, 105, 105);
		letter-spacing: 4rpx;
		margin: 20prx;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;

		&_frist {
			display: inline-block;
			height: 80rpx;
			width: 32%;
			background-color: #fff;
		}

		&_title {
			height: 30rpx;
			width: 100%;
			font-size: 26rpx;
			text-align: center;
			line-height: 50rpx;
			letter-spacing: 2rpx;
		}

		&_spec {
			height: 30rpx;
			width: 100%;
			font-size: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}

		&_tow {
			width: 32%;
			background-color: #fff;
		}
	}
}


.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.selectWare {
	text-align: center;
	font-size: 28rpx;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.selectWare::after {
	content: "";
	position: absolute;
	top: 8rpx;
	right: 70rpx;
	width: 10rpx;
	height: 10rpx;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	transform: rotate(45deg);
	transition: all 0.3s;
	/* 变化快不要忘记加transition过渡来辅助 */
}
</style>
